<template>
    <div>
        <div id="qrCode" ref="qrCodeDiv"></div>
        <div style="margin-top: 40px"></div>
        <div>
            <vue-barcode format="CODE39" value="1aaa212323" >展示内容</vue-barcode>
        </div>
        <div style="margin-top: 40px">https://github.com/lindell/JsBarcode/wiki/Options</div>
        <div>网址是条形码的说明</div>
    </div>
</template>

<script>
import QRcode from 'qrcodejs2'
import VueBarcode from 'vue-barcode'

export default {
  components: {
    VueBarcode
  },
  mounted: function () {
    this.$nextTick(function () {
      this.bindQRCode()
    })
  },
  methods: {
    bindQRCode: function () {
      let qrcode = new QRcode('qrCode', {
        width: 100,
        height: 100, // 高度
        text: 'https://www.baidu.com', // 二维码内容
        render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f',
        // foreground: '#ff0'
      })
      console.log(qrcode)
    }
  }
}
</script>

<style scoped>

</style>
